<ion-content #contentId style="position: absolute;" class="bg" [forceOverscroll]="true">
  <ion-list lines="none" inset="true" style=" border-radius:8px;">
    <ion-item-sliding *ngFor="let item of listData;let index = index;" #slide>
      <ion-item style="--border-width:0 0 0 0;--padding-start: 1.25rem;--padding-end: 1.25rem;--inner-padding-end:0;"
        [ngClass]="{'pxwCaseTagHeight': item.buttonList||item.collection_status,'ppwCaseTagHeight':!item.buttonList&&!item.collection_status}">
        <ion-row style="width: 100%;">
          <ion-col size="12" size-sm style="padding:0 !important;">
            <div class="info-box" appDebounceClick (debounceClick)="clickLink(item)">
              <div class="img-box" *ngIf="item.images">
                <img [src]="item.images.imageUrl" onerror="this.src='assets/img/375x250@2x.png'"
                  class="head-img" />
                <i class="img-box-i" *ngIf="item.ifVideo === 'true'"></i>
                <span *ngIf="item.images.isAuthenticated.value === true || item.images.isAuthenticated.value === 'true'"
                  class="isAuthenticated">{{item.images.isAuthenticated.label}}</span>
              </div>
              <div class="img-box" *ngIf="item.imageUrl">
                <img [src]="item.imageUrl.url" onerror="this.src='assets/img/375x250@2x.png'"
                  class="head-img" />
                <i class="img-box-i" *ngIf="item.ifVideo === 'true'"></i>
              </div>
              <div class="detail-box">
                <h3 [ngClass]="{'item-title-2line': !item.info && !item.time && !item.stars}">{{item.title}}</h3>
                <p *ngIf="item.info || item.time" >{{item.info}}<i>{{item.time}}</i></p>
                <p class="detail-box-items" *ngIf="item.contentLeft || item.contentRight">{{item.contentLeft}} <span *ngIf="item.contentLeft && item.contentRight" class="item-sep"></span> <i>{{item.contentRight}}</i></p>
                <div class="rating-box">
                  <app-rating *ngIf="item.stars" [rate]="item.stars"></app-rating><span
                    class="satisfy">{{item.satisficing}}</span>
                </div>
                <div class="time-box" *ngIf="item?.dataTime">
                  <div class="data-time" *ngIf="item?.dataTime">{{item?.dataTime}}</div>
                  <div class="server-type" *ngIf="item?.serverType">{{item?.serverType}}</div>
                </div>
              </div>
            </div>
            <hr class="line" *ngIf="!item.buttonList&&!item.collection_status" />
            <div class="menu-box" *ngIf="item.buttonList||item.collection_status">
            
              <p  *ngIf="item.dateInfo || item.dateNum || item.cycle" class="date-item"> <span *ngIf="item.cycle" class="cycle">{{item.cycle}}</span><span class="date-info" *ngIf="item.dateInfo">{{item.dateInfo}}</span><span class="date-num" *ngIf="item.dateNum">{{item.dateNum}}</span></p>
           
              <ng-container *ngFor="let subItem of item.buttonList">
                <div appDebounceClick (debounceClick)="shareCase(subItem.link)" class="shareDiv" *ngIf="subItem.action==='link'">
                  <img class="shareImg" src="assets/icon/nav_icon_share_white@3x.png"
                     />
                </div>
                <div class="collectionDiv" *ngIf="subItem.label!=='取消收藏'&&subItem.action==='submit'"
                  appDebounceClick (debounceClick)="collectionCase(item.collection_status,index,subItem.submit.id,subItem.submit.content.plugin_id,subItem.submit.content.opportunity_id,subItem.submit.content.customer_id)">
                  <img class="collectionImg" *ngIf="item.collection_status==='1'" id="collectionImg{{index}}"
                    src="assets/icon/nav_icon_collection_red_nor@3x.png" />
                  <img class="collectionImg" *ngIf="item.collection_status!=='1'" id="collectionImg{{index}}"
                    src="assets/icon/nav_icon_collection_white_nor@3x.png" />
                </div>
              </ng-container>
            </div>
          </ion-col>
        </ion-row>
      </ion-item>
      <ng-container *ngFor="let subItem of item.buttonList">
        <ion-item-options side="end" *ngIf="subItem.label==='取消收藏'">
          <ion-button color='danger' expand="full" style="width:5.25rem;height:7.6rem;"
            appDebounceClick (debounceClick)='resetCollection(subItem.submit.id,subItem.submit.content.plugin_id,subItem.submit.content.opportunity_id,subItem.submit.content.customer_id)'>
            {{subItem.label}}</ion-button>
        </ion-item-options>
      </ng-container>
    </ion-item-sliding>
    <ul style="height: 3rem;" *ngIf="listData && listData.length === 0">
      <div class="noDataButton" *ngIf="listData && listData.length === 0">暂无数据</div>
    </ul>
  </ion-list>

  <!-- <ul #listBox>
    <li class="clearfix" *ngFor="let item of listData;let index = index;">
      <div class="info-box" appDebounceClick (debounceClick)="clickLink(item)">
        <div class="img-box" *ngIf="item.images">
          <img [src]="item.images.imageUrl" onerror="this.src='assets/img/375x250@2x.png'" class="head-img" />
          <i *ngIf="item.ifVideo === 'true'"></i>
          <span *ngIf="item.images.isAuthenticated.value === true || item.images.isAuthenticated.value === 'true'"
            class="isAuthenticated">{{item.images.isAuthenticated.label}}</span>
        </div>
        <div class="img-box" *ngIf="item.imageUrl">
          <img [src]="item.imageUrl.url" onerror="this.src='assets/img/375x250@2x.png'" class="head-img" />
          <i *ngIf="item.ifVideo === 'true'"></i>
        </div>
        <div class="detail-box">
          <h3>{{item.title}}</h3>
          <p>{{item.info}}<i>{{item.time}}</i></p>
          <app-rating [rate]="item.stars"></app-rating><span class="satisfy">{{item.satisficing}}</span>
        </div>
      </div>
      <div class="menu-box">
        <span class="cycle">{{item.cycle}}</span>

        <ng-container *ngFor="let subItem of item.buttonList">
          <div class="shareDiv" *ngIf="subItem.action==='link'">
            <img class="shareImg" src="assets/icon/nav_icon_share_white@3x.png" appDebounceClick (debounceClick)="shareCase(subItem.link)" />
          </div>
          <div class="collectionDiv" *ngIf="subItem.action==='submit'"
            appDebounceClick (debounceClick)="collectionCase(item.collection_status,index,subItem.submit.id,subItem.submit.content.plugin_id,subItem.submit.content.opportunity_id)">
            <img class="collectionImg" *ngIf="item.collection_status==='1'" id="collectionImg{{index}}"
              src="assets/icon/nav_icon_collection_red_nor@3x.png" />
            <img class="collectionImg" *ngIf="item.collection_status!=='1'" id="collectionImg{{index}}"
              src="assets/icon/nav_icon_collection_white_nor@3x.png" />
          </div>
        </ng-container>

      </div>
    </li>
  </ul>
  -->
  <!-- <ul style="height: 3rem;" *ngIf="listData && listData.length === 0">
    <div class="noDataButton" *ngIf="listData && listData.length === 0">暂无数据</div>
  </ul> -->
  <ion-infinite-scroll (ionInfinite)="loadMoreData($event)">
    <ion-infinite-scroll-content loadingSpinner="crescent" loadingText="正在加载更多数据..." threshold="5%">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>